<template>
  <div
    class="carousel-container"
    :style="{
      width: cWidth,
      height: cHeight,
    }"
  >
    <!-- 箭头指示器组件 -->
    <Prvious class="prvious" v-if="isShowArrorw" @changeCurIndex="changeCurIndex" :bgc="bgc" :arrowColor="arrowColor" :arrowSize="arrowSize"></Prvious>
    <Next class="next" v-if="isShowArrorw" @changeCurIndex="changeCurIndex" :bgc="bgc" :arrowColor="arrowColor" :arrowSize="arrowSize"></Next>

    <!-- 轮播图 小圆点指示器组件 -->
    <Pointer :curIndex="curIndex" :num="num" :isShowPointer="isShowPointer"
    @changeCurIndex="changeCurIndex"></Pointer>

    <!-- 图片插槽 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  setup(props, ctx) {
    const changeCurIndex = function (type) {
      let idx
      switch(type) {
        case 'prvious':
          idx = props.curIndex - 1 < 0 ? props.num - 1
                                       : props.curIndex - 1;
          break;
        case 'next':
          idx = props.curIndex + 1 > props.num - 1 ? 0 : props.curIndex + 1
          break;
        default:
          idx = type;
          break;
      };
      ctx.emit('changeCurIndex', idx);
    }

    return {
      changeCurIndex
    }
  },
  props: {
    isShowArrorw: {
      type: Boolean,
      default: true,
    },
    isShowPointer: {
      type: Boolean,
      default: true,
    },
    cWidth: {
      type: String,
      default: '500px',
    },
    cHeight: {
      type: String,
      default: '400px',
    },
    curIndex: {
      type: [Number, String],
      defualt: 0,
    },
    bgc: String,
    arrowColor: String,
    arrowSize: String,
    num: Number,
  },
};
</script>

<style lang="scss" scoped>
.carousel-container {
  position: relative;
  box-sizing: border-box;
  .prvious {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}
</style>
